<template>
  <el-form class="add-event-reposts" v-if="wbData">
    <el-divider content-position="center">内容设置</el-divider>
    <switch-normal label="投票加博文转评赞数据" v-model="wbData.isAddReposts" @change="onUpdateWbComponent"></switch-normal>
    <div v-if="(events.reposts || events.user)" class="margin-left-right-16 margin-bottom-10">
      <p class="margin-bottom-10">选择需要显示的内容(需添加用户信息事件)</p>
      <el-checkbox-group v-model="dataKeys" @change="onCheckboxDataKeys">
        <el-checkbox v-for="(label, index) in REPOSTS_KEYS" :key="index" :label="label" ></el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button type="primary" @click.stop="onAddWbItem($event)" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(item, index) in eventWbLists" :name="index+1" :key="index">
        <template #title>博文{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteWbItem($event, index)"></i>
        </template>
        <input-normal label="mid" v-model="item.mid" @change="onUpdateWbItem(index)"></input-normal>
        <add-img-con :url="item.url" picAttr="url" :event="event" :index="index" :isCrop='false' :height="100" :width="260" class="margin-left-right-16"></add-img-con>
        <input-normal label="图片地址" v-model="item.url" @change="onUpdateWbItem(index)"></input-normal>
        <add-img-con :url="item.otherUrl" picAttr="otherUrl" :event="event" :index="index" :isCrop='false' :height="100" :width="260" class="margin-left-right-16"></add-img-con>
        <input-normal label="其他图片" v-model="item.otherUrl" @change="onUpdateWbItem(index)"></input-normal>
        <textarea-normal label="博文标题" placeholder="默认内容，或样式调试" v-model="item.push_title" @change="onUpdateWbItem(index)"></textarea-normal>
        <textarea-normal label="博文内容" placeholder="通过mid可以自动获取内容，或默认内容，或样式调试" v-model="item.push_text" @change="onUpdateWbItem(index)"></textarea-normal>
        <textarea-normal label="图片或空白区域跳转链接" v-model="item.link" @change="onUpdateWbItem(index)"></textarea-normal>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script setup lang="ts">
import { useWebControlsStore } from '@/store/web/controls'
import { useWebComponentStore } from '@/store/web/component'
import { getWbListByItem } from '@/components/utils'
import { WbComponentDatas, REPOSTS_KEYS, REPOSTS_KEY_VALUE_MAP } from '@/const/web/'
import { isHasOwnProperty } from '@/utils'

const props = defineProps<{ 
  event: IEvent,
  index: number,
}>()

const event = props.event
const useWebControls = useWebControlsStore()
const useWebComponent = useWebComponentStore()

const  activeNames = [1]

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const events = computed(() => {
  return useWebComponent.currentComponentData!.events
})
let wbData_: any
const wbData = computed(() => {
  try {
    wbData_ = useWebControls.currentControls![event.controlId] && useWebControls.currentControls![event.controlId].data
  } catch (error) {
    console.log("controlData.data null")
  }
  return wbData_
})
let wbLists_: any[]
const eventWbLists = computed(() => {
  wbData_ = useWebControls.currentControls![event.controlId] && useWebControls.currentControls![event.controlId].data
  if(wbData_ && wbData_.elements) {
    wbLists_ = wbData_.elements
  }
  return wbLists_
})
const getDataKeys = () => {
  const dataKeys_: string[] = []
  const dataKeys = useWebComponent.currentComponentData!.dataKeys
  _.forEach(dataKeys, (text: string) => {
    if(text) {
      dataKeys_.push(text)
    }
  })
  return dataKeys_
}
const dataKeys_: string[] = getDataKeys()
const dataKeys = ref(dataKeys_)
const onCheckboxDataKeys = (arr: string[]) => {
  const dataKeys = {}
  _.forEach(arr, (key: string) => {
    dataKeys[REPOSTS_KEY_VALUE_MAP[key]] = key
  })
  useWebComponent.updateCurrentComponentDataDataKeys(dataKeys)
}
const onUpdateWbComponent = () => {
  useWebControls.updateWbComponent({ controlId: event.controlId, data: wbData_ })
}
const onAddWbItem = () => {
  const controlId = event.controlId
  let item: any
  const wbList = getWbListByItem(useWebComponent.currentComponentData!)
  if(wbList[0]) {
    item = _.cloneDeep(wbList[0])
    item.mid = ''
  } else {
    item = _.cloneDeep(WbComponentDatas[event.controlId].data.elements[0])
  }
  useWebControls.addWbComponentItem({controlId, item})
}
const onDeleteWbItem = (e: any, index: number) => {
  e.stopPropagation()
  e.preventDefault()
  const params = {controlId: event.controlId, index}
  useWebControls.deleteWbComponentItem(params)
}
const onUpdateWbItem = (index: number) => {
  const controlId = event.controlId
  const wbList = getWbListByItem(useWebComponent.currentComponentData!)
  const params = {item: wbList[index], index, controlId}
  useWebControls.updateWbComponentItem(params)
}
</script>
